import React, { Component } from 'react';
import { Input, Space, Table,  message, Modal } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import styles from './index.less';
import api from '../../../api/grade/grade';
export default class GradeList extends Component {
    state = {
        data: [{}],//后台返回的列表数据
        value: "",
        modify:"",
        isModalVisible: false,
        idR:"",//暂存id
    }
    //生命周期函数
    componentDidMount() {
        //调用封装函数然后发送接口
        this.getGradeList();
    }

    //渲染列表功能
    getGradeList = async () => {
        //发送渲染列表的api
        const re = await api.getGradeListApi();
        this.setState({ data: re.data });
    }
    //删除年级功能
    deleteGrade = async (id1) => {
        const re = await api.deleteGradeApi(id1);
        console.log(re);
    }

    //搜索功能
    onSearch = async (value) => {
        if (value == "") {
            message.success('请不要搜索空字符', 3);
        }
        else {
            //查询年级
            const re = await api.checkGradeApi(Number(value));
            if (re.data === null) {
                message.success('您待搜索的年级不存在', 3);
                this.setState({ value: "" });
            }
            else {
                this.setState({ data: [re.data] });
                this.setState({ value: "" });
            }
        }

    }


    //下面两个都是将组件变成受控组件的方法
    clearInput = (e) => {
        const val = e.target.value;
        this.setState({ value: val });
    }
    modify=(e)=>{
        const val=e.target.value;
        this.setState({modify:val});
    }

    //删除功能
    deGrade = async (record) => {
        //因为都是异步函数 所以要用await 等待
        await this.deleteGrade(record.id);
        message.success('删除年级成功！', 3);
        //重新渲染列表
        await this.getGradeList();
    }

    //下面是弹框的设置
    showSet=(record)=>{
        //当被修改按钮被点击时，设置弹窗为可见
        this.setState({isModalVisible:true});
        this.setState({idR:record.id});
    }
    handleOk = async () => {
        if(this.state.modify!="")
        {
          const re= await api.modifyGradeApi({name:this.state.modify,id:this.state.idR});
          console.log(333,re);
            if(re.code===200)
            {
                message.success('修改年级名成功！', 3);
                this.setState({isModalVisible:false});
                this.setState({modify:""});
                //重新渲染列表
                this.getGradeList();
            }
            else if(re.code===102)
            {
                message.error('修改年级名失败，输入格式为2-5个字符！', 3);
                this.setState({isModalVisible:false});
                this.setState({modify:""});
            }
            else if(re.code===101)
            {
                message.error('修改年级名重复！', 3);
                this.setState({isModalVisible:false});
                this.setState({modify:""});
            }
        }
        else
        {
            message.error('修改年级名不可为空，输入格式为2-5个字符！', 3);
            this.setState({isModalVisible:false});
            this.setState({modify:""});
        }
    };
    handleCancel = () => {
        this.setState({isModalVisible:false});
    };

    suffix = () => {
        return (
            <AudioOutlined
                style={{
                    fontSize: 16,
                    color: '#1890ff',
                }}
            />
        )
    }
    render() {
        const { Search } = Input;
        const { Column, ColumnGroup } = Table;
        const { data, value, isModalVisible,modify } = this.state;
        return (
            <div id={styles.gradeList}>
                <div className={styles.setFont}>年级列表</div>
                <div className={styles.gradeBox}>
                    <div className={styles.gradeSearch}>
                        <Space direction="vertical">
                            <Search
                                placeholder="input Id"
                                allowClear
                                enterButton="Search"
                                size="large"
                                onSearch={this.onSearch}
                                onChange={this.clearInput}
                                value={value}
                            />
                        </Space>
                    </div>
                    <div className={styles.gradeList}>
                        <Table dataSource={data} scroll={{ y: 240 }}>
                            <Column title="id" dataIndex="id" key="id" />
                            <Column title="name" dataIndex="name" key="name" />
                            <Column
                                title="Action"
                                key="action"
                                render={(text, record, index) => (
                                    <Space size="middle">
                                        <a onClick={()=>this.showSet(record)}>modify</a>
                                        <a onClick={() => this.deGrade(record)}>Delete</a>
                                    </Space>
                                )}
                            />
                        </Table>,
                    </div>
                    {/* 修改弹框 */}
                    <div>
                        <Modal title="修改年级名" visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                            <input placeholder="input newGradename" className={styles.inputSty} value={modify} onChange={this.modify}/>
                        </Modal>
                    </div>
                </div>
            </div>
        )
    }
}
